<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气插件</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="jquery-1.11.3.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <style>
        .solid{border-left: 1px solid #ccc;padding-left: 40px}
        .message{display: inline-block;margin-left: 50px}
        .weather img{margin-top: -100px}
    </style>
</head>
<body>
<div class="weather panel panel-primary">
    <div class="panel-heading">
        <span id="city"></span>
        <button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">更换城市</button>
    </div>
    <div class="panel-body">
        <div class="today col-md-4">
            <img src="./images/sun.png" alt="">
            <div class="message">
                <p>今天</p>
                <p>晴天</p>
                <p>最高</p>
                <p>最低</p>
            </div>
        </div>
        <div class="tomorrow solid col-md-4">
            <img src="./images/rain.png" alt="">
            <div class="message">
                <p>明天</p>
                <p>小雨</p>
                <p>最高</p>
                <p>最低</p>
            </div>
        </div>
        <div class="afterTomorrow solid col-md-4">
            <img src="./images/cloud.png" alt="">
            <div class="message">
                <p>后天</p>
                <p>多云</p>
                <p>最高</p>
                <p>最低</p>
            </div>
        </div>
    </div>
    <span id="tips"></span>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <input type="text" class="form-control" id="newCity" placeholder="请输入城市名...">
      <button class="btn btn-default" onclick="changeCity()">确认</button>
    </div>
  </div>
</div>
</body>
</html>
<script>
    window.onload = function () {
        getWeather('宁波');
    };
    //更换城市
    function changeCity() {
       
        var newCity = $("#newCity");
        //未输入城市名点击确认提示
        if(newCity.val()==''){
            alert('请输入城市名!');
            newCity.focus();
            return false;
        }
        getWeather(newCity.val());
        $(".modal").modal('hide');//模态框关闭
    }
    //ajax请求天气数据
    function getWeather(city) {
        $.ajax({
            type: "get",
            dataType: "json",
            url: 'http://wthrcdn.etouch.cn/weather_mini?city='+city,
            success: function (data) {
                $("#city").html("当前城市:"+city)//显示当前城市
                var tips = data.data.ganmao;
                var today = data.data.forecast[0];
                var tomorrow = data.data.forecast[1];
                var afterTomorrow = data.data.forecast[2];
                //填充Tips天气提示
                $("#tips").html("小贴士:" + tips);
                //填充天气数据
                setWeather(".today", today);
                setWeather(".tomorrow", tomorrow);
                setWeather(".afterTomorrow", afterTomorrow);
                //设置天气img的src
                matchType(today.type, ".today");
                matchType(tomorrow.type, ".tomorrow");
                matchType(afterTomorrow.type, ".afterTomorrow");
            }
        });
    }
    //提取json数据并填充到标签中
    function setWeather(date,data) {
        $(date).find('p').eq(0).html(data.date);
        $(date).find('p').eq(1).html(data.type);
        $(date).find('p').eq(2).html(data.high);
        $(date).find('p').eq(3).html(data.low);
    }
    //正则匹配天气类型，修改天气img的src
    function matchType(type,date) {
        var rain = /\u96e8/; //雨
        var sun = /\u6674/;  //晴
        var cloud = /\u4e91/;//云
        //var overcast = /\u9634/; //阴

        //判断api返回的天气类型包含的关键字是 雨 or 晴 or 云 or 阴
        var imgName =  rain.test(type)?"rain":(sun.test(type)?"sun":(cloud.test(type)?"cloud":"overcast"));
        //根据天气类型关键字来匹配对应的天气图片
        $(date).find('img').attr('src','images/'+imgName+'.png');
    }
</script>